<script setup>
import { ref } from 'vue'
import { useTaskStore } from '../../stores/taskStore'
import { useCategoryStore } from '../../stores/categoryStore'
import TaskForm from './TaskForm.vue'

const props = defineProps({
  defaultCategoryId: {
    type: String,
    default: null
  }
})

const taskStore = useTaskStore()
const categoryStore = useCategoryStore()
const taskTitle = ref('')
const showDetailForm = ref(false)
const quickAddMode = ref(true)

// 任务默认值
const newTask = ref({
  title: '',
  description: '',
  completed: false,
  dueDate: null,
  reminder: null,
  priority: 'medium',
  categoryId: props.defaultCategoryId,
})

// 快速添加任务
const quickAddTask = () => {
  if (!taskTitle.value.trim()) return
  
  // 获取默认分类或第一个分类
  let categoryId = props.defaultCategoryId
  if (!categoryId) {
    const categories = categoryStore.sortedCategories
    categoryId = categories.length > 0 ? categories[0].id : null
  }
  
  // 添加任务
  taskStore.addTask({
    title: taskTitle.value.trim(),
    categoryId
  })
  
  // 清空输入
  taskTitle.value = ''
}

// 显示详细添加表单
const showAddTaskForm = () => {
  newTask.value = {
    title: taskTitle.value,
    description: '',
    completed: false,
    dueDate: null,
    reminder: null,
    priority: 'medium',
    categoryId: props.defaultCategoryId,
  }
  
  taskTitle.value = ''
  showDetailForm.value = true
  quickAddMode.value = false
}

// 保存详细任务
const saveDetailTask = (taskData) => {
  taskStore.addTask(taskData)
  showDetailForm.value = false
  quickAddMode.value = true
}

// 取消添加
const cancelAddTask = () => {
  showDetailForm.value = false
  quickAddMode.value = true
}

// 焦点在输入框时按Enter添加任务，按Shift+Enter显示详细表单
const handleKeyDown = (event) => {
  if (event.key === 'Enter') {
    if (event.shiftKey) {
      event.preventDefault()
      showAddTaskForm()
    } else if (taskTitle.value.trim()) {
      event.preventDefault()
      quickAddTask()
    }
  }
}
</script>

<template>
  <div class="add-task-container">
    <!-- 快速添加任务 -->
    <v-card v-if="quickAddMode" variant="outlined" class="quick-add-card">
      <div class="d-flex align-center px-4 py-2">
        <v-icon color="grey" class="mr-3">mdi-plus</v-icon>
        
        <v-text-field
          v-model="taskTitle"
          placeholder="添加任务，按Enter快速添加，按Shift+Enter展开详细表单"
          variant="plain"
          hide-details
          density="compact"
          @keydown="handleKeyDown"
          class="flex-grow-1"
        ></v-text-field>
        
        <v-btn
          icon
          variant="text"
          @click="showAddTaskForm"
          :disabled="!taskTitle.trim()"
        >
          <v-icon>mdi-chevron-down</v-icon>
        </v-btn>
      </div>
    </v-card>
    
    <!-- 详细添加任务表单 -->
    <div v-if="showDetailForm">
      <TaskForm
        :task="newTask"
        :isEditing="false"
        @save="saveDetailTask"
        @cancel="cancelAddTask"
      />
    </div>
  </div>
</template>

<style scoped>
.add-task-container {
  margin-bottom: 16px;
}

.quick-add-card {
  transition: all 0.2s ease;
}

.quick-add-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 